<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
    <head>
        <title>openWYSIWYG | Create or Modify Link</title>
    </head>
    <script type="text/javascript" src="../scripts/wysiwyg-popup.js"></script>

    <script type="text/javascript">

        /* ---------------------------------------------------------------------- *\
         Function    : insertHyperLink() (changed)
         Description : Insert the link into the iframe html area
         \* ---------------------------------------------------------------------- */
        function insertHyperLink() {
            var n = WYSIWYG_Popup.getParam('wysiwyg');

            // get values from form fields
            var href = document.getElementById('linkUrl').value;
            var target = document.getElementById('linkTarget').value;
            var style = document.getElementById('linkStyle').value;
            var styleClass = document.getElementById('linkClass').value;
            var name = document.getElementById('linkName').value;

            // insert link
            WYSIWYG.insertLink(href, target, style, styleClass, name, n);
            window.close();
        }

        /* ---------------------------------------------------------------------- *\
         Function    : loadLink() (new)
         Description : Load the link attributes to the form
         \* ---------------------------------------------------------------------- */
        function loadLink() {
            // get params
            var n = WYSIWYG_Popup.getParam('wysiwyg');

            // get selection and range
            var sel = WYSIWYG.getSelection(n);
            var range = WYSIWYG.getRange(sel);
            var lin = null;
            if (WYSIWYG_Core.isMSIE) {
                if (sel.type == "Control" && range.length == 1) {
                    range = WYSIWYG.getTextRange(range(0));
                    range.select();
                }
                if (sel.type == 'Text' || sel.type == 'None') {
                    sel = WYSIWYG.getSelection(n);
                    range = WYSIWYG.getRange(sel);
                    // find a as parent element
                    lin = WYSIWYG.findParent("a", range);
                }
            }
            else {
                // find a as parent element
                lin = WYSIWYG.findParent("a", range);
            }

            // if no link as parent found exit here
            if (lin == null)
                return;

            // set form elements with attribute values
            for (var i = 0; i < lin.attributes.length; i++) {
                var attr = lin.attributes[i].name.toLowerCase();
                var value = lin.attributes[i].value;
                if (attr && value && value != "null") {
                    switch (attr) {
                        case "href":
                            // strip off urls on IE
                            if (WYSIWYG_Core.isMSIE)
                                value = WYSIWYG.stripURLPath(n, value, false);
                            document.getElementById('linkUrl').value = value;
                            break;
                        case "target":
                            document.getElementById('linkTarget').value = value;
                            selectItemByValue(document.getElementById('linkTargetChooser'), value);
                            break;
                        case "name":
                            document.getElementById('linkName').value = value;
                            break;
                        case "class":
                            document.getElementById('linkClass').value = value;
                            break;
                        case "className":
                            document.getElementById('linkClass').value = value;
                            break;

                    }
                }
            }

            // Getting style attribute of the link separately, because IE interprets the 
            // style attribute is an complex object, and do not return a text stylesheet like Mozilla.
            document.getElementById('linkStyle').value = WYSIWYG_Core.replaceRGBWithHexColor(WYSIWYG_Core.getAttribute(lin, "style"));
        }

        /* ---------------------------------------------------------------------- *\
         Function    : updateTarget() (new)
         Description : Updates the target text field
         Arguments   : value - Value to be set
         \* ---------------------------------------------------------------------- */
        function updateTarget(value) {
            document.getElementById('linkTarget').value = value;
        }

        /* ---------------------------------------------------------------------- *\
         Function    : selectItem()
         Description : Select an item of an select box element by value.
         \* ---------------------------------------------------------------------- */
        function selectItemByValue(element, value) {
            if (element.options.length) {
                for (var i = 0; i < element.options.length; i++) {
                    if (element.options[i].value == value) {
                        element.options[i].selected = true;
                        return;
                    }
                }
                element.options[(element.options.length - 1)].selected = true;
            }
        }

    </script>
    <body bgcolor="#EEEEEE" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" onLoad="loadLink();">

        <table border="0" cellpadding="0" cellspacing="0" style="padding: 10px;"><tr><td>

                    <span style="font-family: arial, verdana, helvetica; font-size: 11px; font-weight: bold;">Insert Hyperlink:</span>
                    <table width="330" border="0" cellpadding="1" cellspacing="0" style="background-color: #F7F7F7; border: 2px solid #FFFFFF; padding: 5px;">
                        <tr>
                            <td style="padding-bottom: 2px; padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">URL:</td>
                            <td style="padding-bottom: 2px; padding-top: 0px;" colspan="3">
                                <input type="text" name="linkUrl" id="linkUrl" value="http://" style="font-size: 10px; width: 100%;">
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-bottom: 2px; width: 50px; font-family: arial, verdana, helvetica; font-size: 11px;">Target:</td>
                            <td style="padding-bottom: 2px;" colspan="3">
                                <input type="text" name="linkTarget" id="linkTarget" value="" style="font-size: 10px; width: 65%;">
                                &nbsp;
                                <select name="linkTargetChooser" id="linkTargetChooser" style="font-size: 10px; width: 30%;" onchange="updateTarget(this.value);">
                                    <option value="" selected>no target</option>
                                    <option value="_blank">_blank</option>
                                    <option value="_self">_self</option>
                                    <option value="_parent">_parent</option>
                                    <option value="_top">_top</option>
                                    <option value="">custom</option>
                                </select>
                            </td>	
                        </tr>
                        <tr>
                            <td style="padding-bottom: 2px; width: 50px; font-family: arial, verdana, helvetica; font-size: 11px;">Style:</td>
                            <td style="padding-bottom: 2px;" colspan="3">
                                <input type="text" name="linkStyle" id="linkStyle" value="" style="font-size: 10px; width: 100%;">
                            </td>	
                        </tr>
                        <tr>
                            <td style="padding-bottom: 2px; width: 50px; font-family: arial, verdana, helvetica; font-size: 11px;">Class:</td>
                            <td style="padding-bottom: 2px;">
                                <input type="text" name="linkClass" id="linkClass" value="" style="font-size: 10px; width: 90%;">
                            </td>	
                            <td style="padding-bottom: 2px; width: 30px; font-family: arial, verdana, helvetica; font-size: 11px;">Name:</td>
                            <td style="padding-bottom: 2px; width: 120px;">
                                <input type="text" name="linkName" id="linkName" value="" style="font-size: 10px; width: 100%;">
                            </td>	
                        </tr>

                    </table>	

                    <div align="right" style="padding-top: 5px;"><input type="submit" value="  Submit  " onClick="insertHyperLink();" style="font-size: 12px;" >&nbsp;<input type="submit" value="  Cancel  " onClick="window.close();" style="font-size: 12px;" ></div>

                </td></tr></table>

    </body>
</html>
